@rem:640/750/40rem;
*{margin: 0;padding: 0;border: 0;box-sizing: border-box;}
html,body{font-family: "微软雅黑";font-size:28*@rem;height: 1334*@rem; background: url(../images/bg.jpg) #f4d990 no-repeat; background-size: 100% auto;}
button{font-family: "微软雅黑";font-size:28*@rem;}
@media all and (orientation: portrait) {
    .spxd{display: none;} 
}
@media all and (orientation: landscape) {
    .spxd {position: fixed;left: 0;top: 0;z-index: 9999;width: 100%;height: 100%;background: url(../images/sjxz.png) #000 center no-repeat;background-size: 30%;} 
}

.logo{background: url(../images/logo.png) no-repeat;background-size: 100% auto;width: 140*@rem;height: 54*@rem;position: absolute;left: 26*@rem;top: 26*@rem;z-index: 5;}
.home{float: left;width: 100%;height: 100%;position: relative;

    .play{width: 100%;text-align: center;margin-top: 15*@rem;
        button{ width: 487*@rem;height: 91*@rem;
            &#play{background: url(../images/play2.png);background-size: 100% auto;}
            &#invite{background: url(../images/invite.png);background-size: 100% auto;}
        }
        p{line-height: 60*@rem;color: #4d0415;}
        em{color: #fc4138;font-style: normal;}
    }
    
    .banner{background: url(../images/tit.png);width: 680*@rem;height: 368*@rem; background-size: 100% auto;top: 30*@rem;left: 42*@rem; position: absolute;transform:translate(0,-100%);animation: myfirst2 0.5s forwards}
    
    .ranking{width: 655*@rem;margin: 440*@rem auto 0;
        .tit{width: 652*@rem;height: 70*@rem;background: url(../images/k.png) no-repeat;background-size: 100% auto;}
        .kbox{width: 655*@rem;height: 332*@rem;background: url(../images/kbox.png) no-repeat;background-size: 100% auto; padding: 30*@rem;
            #demo{height: 56*3*@rem;overflow: hidden;}
            table{width: 100%;text-align: center;
                th{color: #fc4138;font-size: 32*@rem;line-height: 70*@rem;width: 33.33%;}
                td{color: #470b03;font-size: 28*@rem;line-height: 56*@rem;width: 33.33%;}
            }
        }
    }
    
    .rule{width: 100%; text-align:right;padding-right: 45*@rem;margin-top: 20*@rem;
        a{color: #4d0415;text-decoration: none;padding-left: 50*@rem;margin-left: 40*@rem;height: 47*@rem;display: inline-block;}
        a:nth-child(1){background: url(../images/ico1.png) left center no-repeat;background-size: 39*@rem 40*@rem;}
        a:nth-child(2){background: url(../images/ico2.png) left center no-repeat;background-size: 39*@rem 47*@rem;}
    }
    
    
}

.gameBox{ height: 100%;float: left;width: 100%;position: relative;
    
    .mt{width: 655*@rem;margin: 0 auto 0;text-align: center;transform: scale(0.9,0.9);
        .kt{background: url(../images/kt.png);background-size: 100% auto; width: 648*@rem;height: 318*@rem;}
        .imgbox{background: url(../images/imgbox.png);background-size: 100% auto;width: 655*@rem;height: 458*@rem;margin-top: -120*@rem;
            img{width: 580*@rem;height: 370*@rem;margin-top: 34*@rem;}
        }
    }
    
    .writebox{text-align: center;width: 100%;
        .write{display: inline-block;vertical-align: middle;
            span{background:url(../images/write.png) ;background-size: 74*@rem 77*@rem; width: 74*@rem;height: 77*@rem;margin: 2*@rem;display: inline-block;float: left;font-size: 40*@rem;color: #fff;line-height: 65*@rem;}
        }
        .backspace{vertical-align: middle; display: inline-block; color: #fff;background: url(../images/backspace.png);background-size: 100% auto;width: 53*@rem;height: 54*@rem;}
    }
    
    .answerBar{width:(92+6)*7*@rem;margin: 22*@rem auto 0;
        span{background:url(../images/answerBar.png) ;background-size: 92*@rem 96*@rem; width: 92*@rem;height: 96*@rem;margin: 3*@rem;display: inline-block;float: left;font-size: 46*@rem;color: #4d0415;line-height: 80*@rem;text-align: center;}
    }
    
    .hint{width: 100%;padding-left: 40*@rem;color: #4d0415;display: inline-block;margin-top: 10*@rem;}
}



.next{background: url(../images/next.png) no-repeat center 351*@rem rgba(0,0,0,0.5);width:100%;height:100%;position: fixed;left: 0;top: 0;display: none;z-index: 999;}


.hide{display: none;}



.share{position:fixed;width: 100%;height: 100%;top: 0;left: 0;background: url(../images/share.png) no-repeat 150*@rem 167*@rem rgba(0,0,0,0.5);background-size: 499*@rem 374*@rem; display: none;z-index: 999;}





@keyframes myfirst2
{
    from {transform:translate(0,-100%);}
    to {transform:translate(0,0);}
}



.pop{position: fixed;z-index: 990;width: 485*@rem;height: 325*@rem;background: url(../images/pop.png);background-size: 100% 100%;display: none;
    .close{background: url(../images/close.png);width: 52*@rem;height: 54*@rem;background-size: 100% 100%;position: absolute;right: 10*@rem;top: -85*@rem;z-index: 9;}
    .ts{width: 100%;height: 137*@rem;text-align: center;position: absolute;top: -106*@rem;left: 0;
        img{height: 137*@rem;}
    }
    .txt{padding: 0 50*@rem;color: #272725;margin-top: 50*@rem;width: 100%;line-height: 36*@rem;
        span{color: #fc4f43;}
       a{color: #fc4f43;text-decoration: underline;}
    }
    .btn{width: 100%;text-align: center;margin-top: 10*@rem;
        span{width: 195*@rem;height: 63*@rem;line-height: 50*@rem;color: #4d0415;font-size: 33*@rem;margin: 0 4*@rem;display: inline-block;position: relative;
            em{font-size: 26*@rem;font-style: normal;position: absolute;bottom: -50*@rem;left: 0;width: 100%;text-align: center;}
        }
        span:nth-child(1){background: url(../images/btn1.png);background-size: 100% 100%;}
        span:nth-child(2){background: url(../images/btn2.png);background-size: 100% 100%;}
        p{text-align: right;padding-right: 45*@rem;line-height: 60*@rem;
            a{color: #fc4f43;text-decoration: underline;}
        }
    }
}
.cover{background: rgba(0,0,0,0.8);position: fixed;z-index: 980;width: 100%;height: 100%;left: 0;top: 0;display: none;}


.loading{position: fixed;background: rgba(0,0,0,0.5);width: 200*@rem;height: 200*@rem;left: 50%;top: 50%;margin: -100*@rem 0 0 -100*@rem;border-radius: 20*@rem;text-align: center;padding-top: 15*@rem;color: #fff;display: none;
    img{width: 100*@rem;margin-bottom: 15*@rem;}
}
